<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>词库管理</title>
    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.3.3/themes/default/easyui.css"></link>
    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.3.3/themes/icon.css"></link>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/jquery.min.js"></script>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
    <script>
        function formatEdit(val,row){
            var picurl = window.location.host;
            picurl=  "<a href='http://"+picurl+"/file/pageShowFile?fid="+row.fid+"'target='_blank'>查看图片</a>"
            return picurl
        }
        function openAddDialog() {
            //$("#userName").removeAttr("readonly");
            $("#name").removeAttr("readonly");
            $("#explian").removeAttr("readonly");
            $("#provenance").removeAttr("readonly");
            $("#file").removeAttr("readonly").removeAttr("hidden")
            $("#fileId").html("成语图片")
            $("#dlg").dialog("open").dialog("setTitle", "添加成语")
            $("#subbutton").removeAttr("hidden")
            $("#subbutton").val("提交")
             $("#subId").removeAttr("hidden")
            var sub = $("#subId").html()
          //  alert(sub)
            $("#subId").html(sub)
            $("#picId").html("");


        }

        function resetValue() {
            $("#name").val("");
            $("#explian").val("");
            $("#provenance").val("");
            $("#file").val("");
        }


        function save() {
            var url = "/idiom/save"
            $("#fm").form("submit", {
                url: url,
                onSubmit: function () {
                    return $(this).form("validate");
                },
                success: function (result) {
                    var result = eval('(' + result + ')');
                    if (result.success) {
                        $.messager.alert("系统提示", "操作成功!")
                        resetValue();
                        $("#dlg").dialog("close");
                        $("#dg").datagrid("reload");
                    } else {
                        $.messager.alert("系统提示", result.errorInfo);
                    }
                }

            })


        }


        $(document).ready(function () {

           $("#dg").datagrid({
               onDblClickRow:function (index,row) {
                   var protocol = window.location.protocol;
                   var server =  window.location.host;
                   var fid = row.fid;
                   var picUrl = protocol+"//"+server+"/file/pageShowFile?fid="+fid;
                   var pichtml="<div><img src='"+picUrl+"' style='width: 200px;height: 200px;padding-left: 100px'/></div>"
                   //alert(protocol)
                   //alert(1)
                   $("#dlg").dialog("open").dialog("setTitle","查看详情");
                   $("#fm").form("load",row);
                   $("#name").attr("readonly","readonly");
                   $("#explian").attr("readonly","readonly");
                   $("#provenance").attr("readonly","readonly");
                   $("#file").attr("hidden","hidden");
                   $("#subbutton").val("")
                   $("#subbutton").attr("hidden","hidden")
                   $("#fileId").html("")
                   $("#picId").html(pichtml);


               }

           });

        });
        
        
        

        
        function delIdiom() {
            var selectedRows = $("#dg").datagrid("getSelections")
            if (selectedRows.length!=1){
                $.messager.alert("系统提示","请选择一条要删除的数据");
                return
            }

            var id = selectedRows[0].id
            $.messager.confirm("系统提示","您确定要删除这条数据吗?",function (r) {
                if (r){
                    var url = "/idiom/del"
                    $.post(url,{id:id},function (data) {
                        if (data.success){
                            $.messager.alert("系统提示","操作成功!")
                            $("#dg").datagrid("reload");
                        }else{
                            $.messager.alert("系统提示",data.errorInfo)
                        }
                        
                    })

                }

            });
        }



        

       /* function upload() {
            //   alert(1)
            var fileObj = document.getElementById("file").files[0];

            var formFile = new FormData();
            formFile.append("file", fileObj); //加入文件对象
            var url = "/file/upload"
            var data = formFile;
            $.ajax({
                url: url,
                data: data,
                type: "Post",
                dataType: "json",
                cache: false,//上传文件无需缓存
                processData: false,//用于对data参数进行序列化处理 这里必须false
                contentType: false, //必须
                success: function (result) {
                    alert(result.data);
                },
            })

        }*/

    </script>

</head>
<body>

<table id="dg" title="词库管理" class="easyui-datagrid" fitColumns="true"
       pagination="true" rownumbers="true" singleSelect="true" url="/idiom/list" fit="true" toolbar="#tb">
    <thead>
    <th field="id" width="20" align="center">编号</th>
    <th field="name" width="50" align="center">成语名称</th>
    <th field="explian" width="50" align="center">解释</th>
    <th field="provenance" width="50" align="center">出处</th>
    <th field="shuffle" width="100" align="center">成语混淆</th>
   <th field="aa" width="50" align="center" formatter="formatEdit">查看图片</th>

    </thead>

</table>
<div id="tb">


    <div>
        <a href="javascript:openAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
        <a href="javascript:delIdiom()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
    </div>




</div>

<div id="dlg" class="easyui-dialog" style="width: 500px;height: 350px;padding: 10px 20px"
     closed="true" buttons="#dlg-buttons" fit="true" data-options="onClose:function(){resetValue()}">
    <form id="fm" method="post" enctype="multipart/form-data">
        <table cellspacing="8px">
            <tr>
                <td>成语名:</td>
                <td>
                    <input type="text" id="name" name="name" class="easyui-validatebox" required="true"/>
                </td>
            </tr>

            <tr>
                <td>解释:</td>
                <td>
                    <textarea rows="5" cols="40" id="explian" name="explian"></textarea>
                </td>
            </tr>

            <tr>
                <td>出处:</td>
                <td>
                    <textarea rows="5" cols="40" id="provenance" name="provenance"></textarea>
                </td>
            </tr>
            <tr>
                <td valign="top" id="fileId">成语图片</td>
                <td id="subId">
                    <input id="file" type="file" name="file" class="easyui-filebox"/><br/><br/><br/><br/>
                    <input id="subbutton" type="button" value="提交" onclick="save()">
                </td>
            </tr>
            <div id="picId" style="position: absolute;margin-top: 250px;margin-left: -40px"></div>
        </table>
    </form>
</div>



</body>
</html>